<!DOCTYPE html>
<html>
<head>
	<title>登录页面</title>
	<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.css">
	<meta charset="utf-8">
</head>
<style type="text/css">
body{
	font-size: 18px;
	font-family: "Times New Roman",Georgia,Serif;
	background: url('images/bg1.jpg');
	
	/*-webkit-perspective:700px;
   -webkit-perspective-origin:center center;
	perspective:700px;*/
}
#box{
	

	/*transform-style:preserve-3d;
	transform-origin:bottom bottom 100px;
	transform: rotateX(-10deg);*/
	
	background: url('images/login.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	color:#555;
	width:350px;

	height:260px;
	//background:#f8f8f8;
	
	position:absolute;
	margin-top:150px;
	right:15%;
	/*border-radius: 4%;*/
	/*box-shadow:8px -5px 13px #488;*/
	padding-top:15px;
	padding-left:15px;
	
}


#box button{
	border:3px solid #e7e7e7;
}
body>img:first-of-type{
	width:80px;
	height:80px;
	position: absolute;
	top:2px;
	left:10%;
	opacity:0.8;
	filter:alpha(opacity=80);
}
body>img:nth-of-type(2){
	width:300px;
	height:230px;
	position: absolute;
	margin-top:150px;
	transform: rotate(-45deg);
	left:6%;
	opacity:0.5;
	filter:alpha(opacity=50);
}
#box a{
	position: absolute;
	z-index: 100;
	right: 10px;
}
</style>
<script type="text/javascript" src="lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="lib/angular/angular.js"></script>

<script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="lib/moment/moment.js"></script>
<script type="text/javascript" src="webapp.js"></script>
<script type="text/javascript" src="services/news.client.service.js"></script>
<script type="text/javascript" src="controllers/news.client.login.js"></script>

<script type="text/javascript">

	var app = angular.module('webapp', []);
	app.controller('validateCtrl', function($scope,$http) {
	    $scope.username ="admin";
	    $scope.password ="123456";
	    $scope.eyechange=function(){
	    	var Oeyechange=document.getElementById("eyechange");
	    	var classval=Oeyechange.getAttribute("class");
	    	if(classval=="glyphicon glyphicon-eye-close"){
	    		document.getElementById('password').setAttribute('type',"text");
	    		Oeyechange.setAttribute('class',"glyphicon glyphicon-eye-open");
	    	}else if(classval=="glyphicon glyphicon-eye-open"){
	    		document.getElementById('password').setAttribute('type',"password");
	    		Oeyechange.setAttribute('class',"glyphicon glyphicon-eye-close");
	    	}
	    }
	   
	    $scope.submit=function(){
	    	if($scope.username==""||$scope.password==""){

	    		return false;
	    	}
	    	$http({
				method: 'POST',
				url: '/login',
				//headers:{'Content-Type': 'application/x-www-form-urlencoded'},
				data:{username:$scope.username,password:$scope.password}
			}).then(function successCallback(res) {
					// 请求成功执行代码
					console.log(res.data);
					if(res.data=="ok"){
						document.getElementById('loginInfo').innerHTML="";
						var a=window.location.search;
						if(a==""){
							window.location.href="/main";
						}else{
							window.location.href="/"+a.split("=")[1];
						}
						//window.location.href="/main";
					}else{
						document.getElementById('loginInfo').innerHTML="用户名或密码错误";
					}
					
				}, function errorCallback(response) {
					// 请求失败执行代码
					document.getElementById('loginInfo').innerHTML="请求失败";
					//window.location.href="http://www.baidu.com";
			});
	    	
	    }
	});

</script>
<body ng-app="webapp">
	<img src="images/logo1.png" >
	<img src="images/12.jpg" >
 <div ng-controller='validateCtrl' id="box"   >
	<form class="form-horizontal" role="form" name='myForm'  novalidate>
		<h2>用户登录 </h2> 
	  <div class="form-group">
	    <label for="username" class="col-sm-1 control-label"><span class="glyphicon glyphicon-user"></span> </label>
	    <div class="col-sm-9">
	      <input type="text" class="form-control" id='username' name="username" placeholder="请输入用户名" ng-model='username' required>
	    </div>
	  </div>
	  <div class="form-group" style="position: relative;">
	    <label for="password" class="col-sm-1 control-label"><span class="glyphicon glyphicon-lock"></span> </label>
	    <div class="col-sm-9" >
	      <input type="password" class="form-control" id='password' name="password" placeholder="请输入密码" ng-model='password' required >
	    </div>
	     <label id="eyechange" class="glyphicon glyphicon-eye-close" ng-click='eyechange()' style="top:5px;font-size:12px;position:relative;right:35px;display:inline-block;"></label>
	  </div>
	  <!-- <div class="form-group">
	    <div class="col-sm-offset-3 col-sm-10">
	      <div class="checkbox">
	        <label>
	          <input type="checkbox">请记住我
	        </label>
	      </div>
	    </div>
	  </div> -->
	  <div class="form-group">
	    <div class="col-sm-offset-4 col-sm-10">
	      <button type="button" ng-click="submit()" class="btn btn-default col-sm-4" ng-disabled="myForm.username.$dirty && myForm.username.$invalid ||
  myForm.password.$dirty && myForm.password.$invalid" >登录</button>
	    </div>
	  </div>
	  <p id="loginInfo" class="col-sm-offset-3 col-sm-10" style="font-size:0.8em;color:red;"></p>
	  <a href="/main">未注册</a>
	</form>
	
</div> 



</body>
</html>